<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/templateInteresado.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="windowTitle">SAMUPG::comentarios</ui:define>

    <ui:define name="libreria">
        <f:metadata>
            <f:viewParam name="publicId" value="#{comentarioController.idPublicacion}" />
            <f:event type="preRenderView" listener="#{comentarioController.preRenderPublicacionListener}" />
        </f:metadata>
        <h:outputStylesheet library="css" name="styleComentar.css" />
    </ui:define>

    <ui:define name="content">
        <div id="topContent" class="center_content">
            <h1>Déjanos tu comentario!!</h1>
            <br/>
        </div>
        <p:growl id="growl" />
        <h:form prependId="false">
            <p:fieldset legend="#{comentarioController.publicacion.titulo}" toggleable="false"
                        style="margin-bottom: 15px; color: black;">
                <h:panelGrid columns="1">
                    <h:outputText value="#{comentarioController.publicacion.publicacionTexto}" />
                </h:panelGrid>
            </p:fieldset>
            
            <div id="leftContent">
                <h:outputText value="#{comentarioController.listComentarios.size()} comentarios" style="margin-right: 25px;"/>
                <p:commandLink value="Ver los comentarios" />
                <br />
                <h:panelGrid columns="3">
                    <h:outputText id="txtUsuNombre" value="#{comentarioController.usuNombre}" style="margin-right: 20px;"/>
                    <h:selectBooleanCheckbox id="blnAnonimo" value="#{comentarioController.anonimo}" label="Anónimo">
                        <f:ajax listener="#{comentarioController.cambiarAnonimoListener}" render="txtUsuNombre"
                                event="change"/>
                    </h:selectBooleanCheckbox>
                    <h:outputLabel for="blnAnonimo" value="¿Anónimo?" /> 
                </h:panelGrid>
                <h:panelGrid columns="1">
                    <p:inputTextarea rows="8" cols="60" counter="counter" maxlength="300"
                                     counterTemplate="{0} carácteres restantes" autoResize="false" 
                                     value="#{comentarioController.comentario.comentarioTexto}" style="background: white; color: black;"/>
                    <h:outputText id="counter" />
                </h:panelGrid>
                <p:commandButton value="Enviar" ajax="true" actionListener="#{comentarioController.registrarComentarioListener}"
                                 update=":growl,dlComentarios"/>
            </div>
            
            <div id="rightContent">
                <center><p style="margin-top: 10px; margin-bottom: 8px; font-size: 1.2em;">Comentarios de los usuarios</p></center>
                <p:dataList value="#{comentarioController.listComentarios}" var="comentario"
                            id="dlComentarios" type="definition">
                    <p:fieldset legend="#{comentario.correo.usuario.usuNombres}" toggleable="true" rendered="#{!comentario.anonimo}"
                                toggleSpeed="500" style="margin-bottom: 15px; color: black;">
                        <h:panelGrid>
                            <h:outputText value="#{comentario.comentarioTexto}" />
                        </h:panelGrid>
                    </p:fieldset>
                    <p:fieldset legend="anónimo" toggleable="true"
                                toggleSpeed="500" style="margin-bottom: 15px; color: black;" rendered="#{comentario.anonimo}">
                        <h:panelGrid>
                            <h:outputText value="#{comentario.comentarioTexto}" />
                        </h:panelGrid>
                    </p:fieldset>
                </p:dataList>
            </div>
        </h:form>
    </ui:define>

</ui:composition>
